<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>未来小说网--查看书籍</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../resources/font/iconfont.css" th:href="@{/resources/font/iconfont.css}">
    <link rel="stylesheet" href="../../resources/css/all.css" type="text/css" th:href="@{/resources/css/all.css}">
    <link rel="stylesheet" href="../../resources/css/look-book.css" type="text/css" th:href="@{/resources/css/look-book.css}">
    <link rel="stylesheet" href="../../resources/css/fix-nav.css" type="text/css" th:href="@{/resources/css/fix-nav.css}">
</head>

<body>
    <div class="wrap" style="background-color: #f5f5f5;min-height: 1000px;">
        <!-- 导航条 -->
        <div class="fixed-nav">
            <div class="cf" style="width: 1200px;margin: 0 auto;">
                <h1 class="top-logo">未来小说网</h1>
                <div class="nav-list site-nav fl">
                    <ul>
                        <li th:each="tagTwo:${tags}" th:if="${tagTwoStat.index} lt 6">
                            <a class="search-info" th:text="${tagTwo}"></a>
                        </li>
                        <li class="more">
                            <a>更多<span></span></a>
                            <div class="dropdown">
                                <a target="_blank">全部作品</a>
                                <a class="search-info" target="_blank" th:each=" tagTwo: ${tags}" th:if="${tagTwoStat.index} gt 5" th:text="${tagTwo}"></a>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="nav-list min-user fr">
                    <ul>
                        <li id="min-search">
                            <form id="form" method="POST" target="_blank" th:action="@{/search(page=1)}">
                                <input class="search-box" id="goSearch" name="keywords" type="text" placeholder="请输入..." value=""/>
                                <input id="keyword" class="fixed-input hide" style="margin-left: 10px;margin-right: 4px;" type="hidden" name="searchBy" value="KEYWORDS"/>
                                <input class="submit-input" type="hidden" id="searchSubmitType" name="sortBy" value="BEST_MATCH"/>
                                <button id="search-btn" for="searchSubmit" type="submit" style="background-color: #2470bf;">
                                    <a style="padding-left: 5px;">
                                        <i class="fa fa-search" style="font-size:16px;color: #ffffff;margin: 16px 20px 0 0;"></i>
                                     </a>
                                </button>
                            </form>
                            <li class="line"></li>
                        </li>
                        <li class="sign-out" th:if="${session.currentAccount} eq null">
                            <a id="fixed-login" th:href="@{/login(redirectTo=${@templateController.getRequestUri()}, errorMessage='请先登录')}">登录</a>
                            <a class="reg" th:href="@{/register}">注册</a>
                        </li>
                        <li class="sign-out" th:if="${session.currentAccount} ne null" th:each="user:${session.currentAccount}">
                            <p style="display: none" id="getUserId" th:text="${user.uid}"></p>
                            <a th:text="${user.userName}"></a>
                            <a th:text="${'LV'+user.level}"></a>
                        </li>
                        <li class="line"></li>
                        <li class="book-shelf" id="top-book-shelf">
                            <a th:if="${session.currentAccount} ne null" th:href="${#request.contextPath}+'/user/'+${session.currentAccount.uid.toString()}" target="_blank">
                                <i class="fa fa-book" style="font-size:16px">我的书架</i>
                            </a>
                        </li>
                        <li class="avatar" th:each="user:${session.currentAccount}">
                            <a th:href="${#request.contextPath}+'/user/'+${session.currentAccount.uid.toString()}" target="_blank">
                                <img th:if="${session.currentAccount} eq null" src="../../resources/img/avatar.png" th:src="@{/resources/img/avatar.png}" style="border-radius: 50%">
                                <img th:if="${session.currentAccount} ne null" th:src="${user.profileImgUrl}" style="border-radius: 50%;width: 40px;height: 40px;">
                                <img th:if="${session.currentAccount} ne null" th:src="${user.profileImgUrl}" style="border-radius: 50%;width: 40px">
                            </a>
                        </li>
                        <li class="avatar" th:if="${session.currentAccount} eq null">
                            <a target="_blank">
                                <img src="../../resources/img/avatar.png" th:src="@{/resources/img/avatar.png}" style="border-radius: 50%">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 书详情 -->
        <div class="book-detail center">
            <!-- 书籍信息 -->
            <!--/*@thymesVar id="novel" type="net.wlgzs.futurenovel.bean.Novel"*/-->
            <div class="book-information cf" th:object="${novel}">
                <div class="book-img">
                    <a id="bookImg">
                        <img th:if="*{coverImgUrl}" th:src="*{coverImgUrl}"/>
                        <img th:unless="*{coverImgUrl}" th:src="@{/resources/img/loading.jpg}"/>
                    </a>
                </div>
                <div class="book-info">
                    <h1><a th:text="*{title}">万族之劫</a>
                        <span th:each="author : *{authors}">
                            <a class="writer" target="_blank" style="margin-right: 10px;" th:text="${author}">老鹰吃小鸡</a>
                        </span>
                    </h1>
                    <p class="tag">
                        <span class="blue" th:each="tag : *{tags}" th:text="${tag}">连载</span>
                    </p>
                    <p class="intro" th:text="*{title}">重生过去、畅想未来、梦幻现实，再塑传奇人生！</p>
                    <p>
                        <span>评分</span><em th:text="*{rating} == 0 ? '暂无' : *{rating}">22.56</em>
                    </p>
                    <p>
                        <a class="blue-btn" href="#freeRead">免费试读</a>
                        <a class="blue-btn add-book"  th:if="${session.currentAccount} ne null"  href="javascript:;" id="addBookBtn">加入书架</a>
                        <a class="blue-btn add-book" id="addBookBtn" th:if="${session.currentAccount} eq null" th:href="@{/login(redirectTo=${@templateController.getRequestUri()})}">加入书架</a>
                        <div id="box" style="margin: 10px 3px">
                            <select id="Shelf" style="width:110px;margin-top:3px;float:left;border-radius: 0" class="blue-btn">
                                <option selected>请选择收藏夹</option>
                            </select>
                            <button style="margin-top:3px;float: left" id="sureAdd" class="blue-btn" type="button">确定</button>
                        </div>
                        <div id="ShelfBox">
                            <input type="text" class="input" id="addShelfInput"><button type="button" class="blue-btn" id="SureToAddShelf">确定</button>
                        </div>
                    </p>
                </div>
            </div>
            <!-- 作品信息 -->
            <div class="content-nav cf">
                <div class="nav-wrap fl">
                    <ul>
                        <li class="bookinfo actinfocata">
                            <a id="book-infopage">作品信息</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="book-content cf" th:object="${novel}">
                <p style="display: none" id="getNovelId" th:text="${novel.uniqueId}"></p>
                <p style="display: none" id="getUploaderId" th:text="${novel.uploader}"></p>
                <div class="left-wrap fl">
                    <div class="book-info">
                        <p style="padding: 10px 10px 30px 10px;border-bottom: 1px solid #e6e6e6;font-size: 14px;" th:utext="${novel.description}"> 我是这诸天万族的劫！ 已有完本作品《全球高武》《重生之财源滚滚》，没看过的书友可以去看看，新书收藏一下慢慢养。</p>
                    </div>
                    <div class="book-state">
                        <ul>
                            <li class="honor" id="honor">
                                <b>出版社</b>
                                <div class="detail">
                                    <strong th:text="${novel.publisher}"></strong>
                                    <p class="honor-icon cf" style="font-size: 12px;" th:text="${{novel.pubdate}}"></p>
                                </div>
                            </li>
                            <li class="update">
                                <b>版权</b>
                                <div class="detail">
                                    <p class="cf">
                                        <a class="blue" target="_blank" th:text="${novel.copyright}"></a>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="right-wrap fr">
                    <div class="author-info">
                        <div class="info-wrap">
                            <div class="author-photo" id="authorId">
                                <a id="memberImg">

                                </a>
                            </div>
                            <p>
                                <a id="uploaderName"></a>
                            </p>
                        </div>
                        <div class="info-wrap">
                            <ul class="work-state cf">
                                <li>
                                    <span class="book"></span>
                                    <p>点击量</p>
                                    <b th:text="${novel.hot}"></b>
                                </li>
                                <li>
                                    <span class="word"></span>
                                    <p>评分</p>
                                    <b th:text="${novel.rating}"></b>
                                </li>
                                <li>
                                    <span class="coffee"></span>
                                    <p>用户等级</p>
                                    <b id="memberLevel"></b>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 目录 -->
            <div class="content-nav cf" id="freeRead">
                <div class="nav-wrap fl">
                    <ul>
                        <li class="bookcata actinfocata">
                            <a id="book-catalogue">目录</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="catalogue-content">
                <div class="volume-wrap">
                    <div class="volume">
                        <h2>
                            <a class="subscri"><i class="fa fa-file-text-o" style="font-size:14px;margin-right: 3px;"></i> 分卷阅读</a>
                            <p style="font-size: 18px;">正文卷<i>·</i><a th:text="|共${novel.size()}章|">共89章</a><span class="free">免费</span></p>
                        </h2>
                        <ul class="cf" th:each="chapter : ${novel}">
                            <li th:each="section : ${chapter}">
                                <a th:href="${#request.contextPath}+'/novel/'+${novel.uniqueId.toString()}+'/read?sectionId='+${section.uniqueId.toString()}" target="_blank" th:text="|${chapter.title} - ${section.title}|">第1章 父子</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer" style="position: relative;top: 130px;">
            <div class="box-center cf">
                <div class="footer-text">
                    <p>网络刷单是违法 切莫轻信有返利，网上交友套路多 卖惨要钱需当心，电子红包莫轻点 个人信息勿填写，仿冒客服来行骗 官方核实最重要，招工诈骗有套路 预交费用需谨慎，低价充值莫轻信 莫因游戏陷套路，连接WIFI要规范 确认安全再连接，抢购车票有章法 确认订单再付款，白条赊购慎使用 提升额度莫轻信，网购预付有风险 正规渠道很重要 </p>
                </div>
                <div class="footer-menu dib-wrap">
                    <a target="_blank">关于未来</a>
                    <a target="_blank">联系我们</a>
                    <a target="_blank">加入我们</a>
                    <a target="_blank">帮助中心</a>
                    <a class="advice" target="_blank">提交建议</a>
                    <a target="_blank">举报中心</a>
                </div>
                <div class="copy-right">
                    <p><span>Copyright © 2002-2020 www.wlgzs.net All Rights Reserved</span> 版权所有 未来工作室</p>
                    <p>请所有作者发布作品时务必遵守国家互联网信息管理办法规定，我们拒绝任何色情小说，一经发现，即作删除！举报电话：010-59357051</p>
                    <p>本站所收录的作品、社区话题、用户评论、用户上传内容或图片等均属用户个人行为。如前述内容侵害您的权益，欢迎举报投诉，一经核实，立即删除，本站不承担任何责任</p>
                </div>
            </div>
        </div>
    </div>
</body>
<script th:inline="javascript" async></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script th:inline="javascript" async>
    function popup_over(icon, color, contant) {
        $('body').append('<div class="popup_over" style="text-align: center; line-height: 80px; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: white; position: fixed; width: 180px; height: 80px; border: 1px solid #D5D6D5; z-index: 1000;"><i class="iconfont ' + icon + '" style="font-size: 30px;color: ' + color + ';"></i><span style="font-size: 16px; position: relative; bottom: 5px;"> ' + contant + '</span></div>');
        setTimeout(function() {
            $('.popup_over').remove();
            // clear('.popup_over');
        }, 1500)
    };
    //添加收藏夹
    function addShelf() {
        const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
        $.ajax({
            url: contextPath+"/api/bookSelf/create",
            type: "POST",
            datatype: "JSON",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify({
                title:  $("#addShelfInput").val().length==0?null:$("#addShelfInput").val(),
            }),
            success: function(data) {
                console.log(data);
                $("#ShelfBox").css("display", "none");
                popup_over('icon-happy-l','#00ff0f',"添加成功");
            },
            error: function(data) {
                console.log(data);
            }
        })
    }
    //得到上传者的所有信息
    function getUploderInfo() {
        const contextPath = /*[[${#request.getContextPath()}]]*/ 'http://localhost:8080/future-novel';
        $.ajax({
            url: contextPath + "/api/account/" + $("#getUploaderId").text() + "/info",
            type: "GET",
            datatype: "json",
            contentType: "application/json;charset=UTF-8",
            data: {},
            success: function(data) {
                console.log(data);
                $("#memberImg").attr("href",contextPath+'/user/'+$("#getUploaderId").text());
                $("#memberImg").append(" <img src='" + "" + data.profileImgUrl + "" + "'>")
                $("#memberLevel").text(data.level);
                $("#uploaderName").text(data.userName);
            },
            error: function(data) {
                console.log(data);
            }
        })
    }
    getUploderInfo();
    //获取用户所有收藏夹
    function getAllAcconutShelf() {
        const contextPath = /*[[${#request.getContextPath()}]]*/ 'http://localhost:8080/future-novel';
        $.ajax({
            url:contextPath + '/api/account/'+$("#getUserId").text()+'/bookSelves',
            datatype: "json",
            contentType: "application/json;charset=UTF-8",
            data: {},
            success: function(data) {
                if(data!=undefined){
                    for (var i = 0; i < data.length; i++) {
                        $("#Shelf").append("<option ShelfId='" + "" + data[i].uniqueId + "" + "'>" + "" + data[i].title + "" + "</option>")
                    }
                }
                else{
                    $("#Shelf").append("<p style='display: none;' id='ShelfLength'>1</p>");
                }
            },
            error: function(data) {
                console.log(data);
            }
        })
    }
    getAllAcconutShelf();
    function AddBookSelf(Id) {
        const contextPath = /*[[${#request.getContextPath()}]]*/ 'http://localhost:8080/future-novel';
        $.ajax({
            url: contextPath + "/api/bookSelf/" + Id + "/add",
            type: "POST",
            datatype: "json",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify({
                novelIndexId: $("#getNovelId").text()
            }),
            success: function(data) {
                console.log(data);
                popup_over('icon-happy-l', '#00ff0f', "添加成功");
            },
            error: function(data) {
                console.log(data);
            }
        })
    }
    $("#addBookBtn").click(function() {
        if($("#ShelfLength").text()==1){
            $("#ShelfBox").css("display","block");
            popup_over('icon-happy-l', '#00ff0f', "请先创建收藏夹");
            $("#SureToAddShelf").click(function () {
                addShelf();
                popup_over('icon-happy-l', '#00ff0f', "创建成功");
                setTimeout(function () {
                    window.location.reload();
                },1500)
            })
        }else{
            $("#box").css("display", "block");
        }
    })

    $("#sureAdd").click(function() {
        $("#box").css("display", "none");
        AddBookSelf($("#Shelf option:selected").attr("ShelfId"))
        if($("#Shelf").children().length==1){
            popup_over('icon-happy-l', '#00ff0f', "请先创建收藏夹");
        }
    })
    // 按照标签搜索
    $(".search-info").click(function () {
        console.log($(this).text());
        $("#goSearch").attr("value", $(this).text());
        $("#form").submit();
    });
</script>


</html>